<template>
  <div>
    <div class="zss_box">
      <div class="zss_titlebox">
        <Icon type="person"></Icon>
        <span>姓名：{{name}}</span>
        <span>学号：{{xh}}</span>
      </div>
      <div class="zss_jf" :class="{zss_jf1:this.sum>60,'zss_jf2':this.sum<=60}">
        <img src="../../static/images/jficon.png">
        <p class="zss_jfyuan" style="margin-top:10px">总积分</p>
        <p class="zss_jfyuan" style="font-size:40px">{{sum}}</p>
      </div>
      
      <div class="zss_jfxq">
        <p>积分详情：</p>
        <ul>
          <li class="zss_jlli" v-for="(item,index) in kfjl" :key="index"> 
            <span class="zss_span1">{{item.content}}</span>
            <span style="color:red;font-size:16px">-{{item.deductMark}}分</span>
            <span style="float:right">{{item.time}}</span>
          </li>
        </ul>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data (){
    return {
      sum:'95',
      name:'',
      xh:'',
      kfjl: []
    }
  },
  methods: {
    loadIntegral () {
      let that = this
      that.axios.get("/gleenSoft-base/credit/integral/currentUser").then(
        (response) => {
          that.kfjl = response.data.result
          that.name = response.data.user.student
          that.xh = response.data.user.userCode
          that.sum = response.data.user.surplus
        }
      )
     
    }
  },
  mounted () {
    this.loadIntegral()
  }
}
</script>

<style scoped>
.zss_titlebox{padding: 10px;background:white;}
.zss_titlebox span{color:#495060;margin-right: 15px}
.zss_jfyuan{font-size:20px;}
.zss_box{width: 800px;margin:10px auto;overflow: hidden;border-radius: 5px;-webkit-border-radius:5px;}
.zss_jf{width: 100%;overflow: hidden;text-align: center;padding: 10px;color: #0A529D;}
/*动态背景图开始*/
.zss_jf1{background:url(../../static/images/jfzsbg.jpg) no-repeat;background-size:cover;}
.zss_jf2{background:#A2A2A2;color: #5C5C5C;background-size:cover; }
/*动态背景图结束*/
.zss_jf img{width: 70px;height: 70px}
.zss_jfxq{background:white;padding: 20px;max-height: 600px;overflow: auto;}
.zss_jfxq p{font-size:18px;color:#00BCD4}
.zss_jlli{border-bottom:1px dashed #DBDBDB;padding: 10px;color:#767676}
.zss_jlli:last-child{border:none;padding-bottom: 0}
.zss_span1{width:300px;display:inline-block}
@media only screen and (max-width: 450px){
  .zss_box{width:100%;}
  .zss_span1{width:120px;}
}
/* 垂直滚动条的滑动块 */
::-webkit-scrollbar
{
  width: 5px;
}
::-webkit-scrollbar-thumb:vertical {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 3px #C8E9FC;
  background-color:#C8E9FC;
}
</style>
